<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 页面标题 -->
    <div class="bg-white border-b border-gray-200 shadow-sm">
      <div class="container mx-auto px-4 py-5">
        <h1 class="text-2xl font-bold text-gray-800">栏目生成页面</h1>
        <p class="text-gray-500 mt-1">根据栏目信息自动生成完整的页面结构和内容框架</p>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container mx-auto px-4 py-6">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 左侧：参数设置 -->
        <div class="lg:col-span-1">
          <div class="bg-white rounded-lg shadow-sm p-5 sticky top-4">
            <h2 class="text-lg font-medium text-gray-800 mb-4">页面参数</h2>
            
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">页面标题</label>
                <input
                  type="text"
                  v-model="form.title"
                  class="form-input w-full"
                  placeholder="输入页面标题"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">所属栏目</label>
                <input
                  type="text"
                  v-model="form.category"
                  class="form-input w-full"
                  placeholder="输入所属栏目"
                >
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">页面类型</label>
                <select
                  v-model="form.type"
                  class="form-input w-full"
                >
                  <option value="article">文章列表页</option>
                  <option value="detail">内容详情页</option>
                  <option value="product">产品展示页</option>
                  <option value="category" selected>栏目首页</option>
                  <option value="about">关于我们页</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">页面模块</label>
                <div class="space-y-2">
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="banner"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">Banner轮播</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="intro"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">栏目介绍</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="featured"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">精选内容</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="list"
                      class="text-primary focus:ring-primary"
                      checked
                    >
                    <span class="ml-2 text-sm">内容列表</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="sidebar"
                      class="text-primary focus:ring-primary"
                    >
                    <span class="ml-2 text-sm">侧边栏</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      type="checkbox"
                      v-model="form.modules"
                      value="comment"
                      class="text-primary focus:ring-primary"
                    >
                    <span class="ml-2 text-sm">评论区</span>
                  </label>
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">设计风格</label>
                <select
                  v-model="form.style"
                  class="form-input w-full"
                >
                  <option value="modern" selected>现代简约</option>
                  <option value="classic">经典稳重</option>
                  <option value="vibrant">活力动感</option>
                  <option value="minimal">极简风格</option>
                  <option value="professional">专业商务</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">额外要求</label>
                <textarea
                  v-model="form.requirements"
                  class="form-input w-full min-h-[100px]"
                  placeholder="输入页面布局或功能的特殊要求..."
                ></textarea>
              </div>
              
              <div class="pt-2">
                <button
                  class="btn btn-primary w-full flex items-center justify-center"
                  :disabled="loading || !form.title"
                  @click="generatePage"
                >
                  <i v-if="loading" class="fa fa-spinner fa-spin mr-2"></i>
                  <span>生成页面结构</span>
                </button>
                <button
                  class="btn btn-secondary w-full mt-3"
                  @click="clearForm"
                >
                  重置参数
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右侧：生成结果 -->
        <div class="lg:col-span-2">
          <div class="bg-white rounded-lg shadow-sm overflow-hidden">
            <!-- 结果工具栏 -->
            <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 flex flex-wrap items-center justify-between gap-3">
              <h2 class="text-lg font-medium text-gray-800">页面结构预览</h2>
              
              <div class="flex gap-2">
                <div class="flex border rounded-md overflow-hidden">
                  <button
                    class="px-3 py-1 text-sm bg-white border-r"
                    :class="viewMode === 'preview' ? 'bg-gray-100' : ''"
                    @click="viewMode = 'preview'"
                  >
                    预览
                  </button>
                  <button
                    class="px-3 py-1 text-sm bg-white"
                    :class="viewMode === 'structure' ? 'bg-gray-100' : ''"
                    @click="viewMode = 'structure'"
                  >
                    结构
                  </button>
                </div>
                <button
                  class="btn btn-secondary flex items-center"
                  :disabled="!pageStructure"
                  @click="copyToClipboard"
                >
                  <i class="fa fa-copy mr-1"></i>复制
                </button>
                <button
                  class="btn btn-primary flex items-center"
                  :disabled="!pageStructure || loading"
                  @click="regeneratePage"
                >
                  <i v-if="loading" class="fa fa-spinner fa-spin mr-1"></i>
                  <i v-else class="fa fa-refresh mr-1"></i>
                  重新生成
                </button>
              </div>
            </div>
            
            <!-- 结果内容区 -->
            <div class="p-0">
              <!-- 空状态 -->
              <div v-if="!pageStructure && !loading" class="py-16 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                  <i class="fa fa-desktop text-2xl text-gray-400"></i>
                </div>
                <h3 class="text-lg font-medium mb-2">尚未生成页面</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                  设置页面参数并点击"生成页面结构"按钮，AI将为您创建完整的页面框架
                </p>
              </div>
              
              <!-- 加载状态 -->
              <div v-if="loading" class="py-16 text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-4">
                  <i class="fa fa-spinner fa-spin text-2xl text-primary"></i>
                </div>
                <h3 class="text-lg font-medium mb-2">AI正在生成页面结构</h3>
                <p class="text-gray-500 max-w-md mx-auto">
                  请稍候，AI正在根据您的需求设计页面布局和内容...
                </p>
              </div>
              
              <!-- 生成结果 - 预览模式 -->
              <div v-if="pageStructure && !loading && viewMode === 'preview'">
                <div class="border-b border-gray-200 p-5 bg-gray-50">
                  <h1 class="text-2xl font-bold">{{ form.title }}</h1>
                  <p class="text-gray-500">所属栏目: {{ form.category }} | 生成时间: {{ generateTime }}</p>
                </div>
                
                <!-- 页面预览内容 -->
                <div class="p-0">
                  <!-- Banner模块 -->
                  <div v-if="form.modules.includes('banner')" class="w-full bg-gray-100">
                    <div class="container mx-auto px-4 py-12 md:py-20 text-center">
                      <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">{{ form.title }}</h2>
                      <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                        欢迎访问{{ form.title }}栏目，这里提供最全面、最专业的相关内容和资源
                      </p>
                      <button class="mt-6 px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90">
                        了解更多
                      </button>
                    </div>
                  </div>
                  
                  <!-- 主要内容区 -->
                  <div class="container mx-auto px-4 py-8">
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                      <!-- 主内容 -->
                      <div class="lg:col-span-2">
                        <!-- 栏目介绍 -->
                        <div v-if="form.modules.includes('intro')" class="mb-8">
                          <h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200">栏目介绍</h2>
                          <div class="prose max-w-none">
                            <p v-html="pageStructure.intro"></p>
                          </div>
                        </div>
                        
                        <!-- 精选内容 -->
                        <div v-if="form.modules.includes('featured')" class="mb-8">
                          <h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200">精选内容</h2>
                          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div v-for="(item, index) in pageStructure.featured" :key="index" class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                              <img :src="`https://picsum.photos/id/${200+index}/600/300`" alt="精选内容图片" class="w-full h-48 object-cover">
                              <div class="p-4">
                                <h3 class="font-medium text-lg mb-2">{{ item.title }}</h3>
                                <p class="text-gray-600 text-sm line-clamp-2">{{ item.desc }}</p>
                                <div class="mt-3 flex justify-between items-center">
                                  <span class="text-xs text-gray-500">{{ item.date }}</span>
                                  <a href="#" class="text-primary text-sm">阅读更多 →</a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                        <!-- 内容列表 -->
                        <div v-if="form.modules.includes('list')">
                          <h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200">最新内容</h2>
                          <div class="space-y-4">
                            <div v-for="(item, index) in pageStructure.list" :key="index" class="border-b border-gray-100 pb-4 last:border-0">
                              <h3 class="font-medium text-lg mb-1">
                                <a href="#" class="text-gray-800 hover:text-primary">{{ item.title }}</a>
                              </h3>
                              <p class="text-gray-600 text-sm line-clamp-2 mb-2">{{ item.desc }}</p>
                              <div class="flex items-center text-xs text-gray-500">
                                <span><i class="fa fa-calendar-o mr-1"></i>{{ item.date }}</span>
                                <span class="mx-2">|</span>
                                <span><i class="fa fa-eye mr-1"></i>{{ item.views }} 阅读</span>
                                <span class="mx-2">|</span>
                                <span><i class="fa fa-comment-o mr-1"></i>{{ item.comments }} 评论</span>
                              </div>
                            </div>
                          </div>
                          
                          <!-- 分页 -->
                          <div class="mt-6 flex justify-center">
                            <nav class="inline-flex rounded-md shadow-sm">
                              <a href="#" class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">上一页</a>
                              <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-primary text-sm font-medium text-white">1</a>
                              <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">2</a>
                              <a href="#" class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">3</a>
                              <a href="#" class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">下一页</a>
                            </nav>
                          </div>
                        </div>
                        
                        <!-- 评论区 -->
                        <div v-if="form.modules.includes('comment')" class="mt-8">
                          <h2 class="text-2xl font-bold mb-4 pb-2 border-b border-gray-200">用户评论</h2>
                          <div class="space-y-4">
                            <div class="p-4 bg-gray-50 rounded-lg">
                              <div class="flex items-start">
                                <img src="https://picsum.photos/id/1005/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                                <div>
                                  <div class="flex items-center">
                                    <h4 class="font-medium">用户{{ Math.floor(Math.random() * 1000) }}</h4>
                                    <span class="ml-2 text-xs text-gray-500">2天前</span>
                                  </div>
                                  <p class="mt-1 text-gray-700 text-sm">这个栏目内容非常丰富，对我帮助很大，希望继续更新更多优质内容！</p>
                                </div>
                              </div>
                            </div>
                            <div class="p-4 bg-gray-50 rounded-lg">
                              <div class="flex items-start">
                                <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                                <div>
                                  <div class="flex items-center">
                                    <h4 class="font-medium">用户{{ Math.floor(Math.random() * 1000) }}</h4>
                                    <span class="ml-2 text-xs text-gray-500">1周前</span>
                                  </div>
                                  <p class="mt-1 text-gray-700 text-sm">内容很专业，讲解清晰，期待看到更多相关主题的深入分析。</p>
                                </div>
                              </div>
                            </div>
                          </div>
                          
                          <div class="mt-4">
                            <textarea class="form-input w-full min-h-[100px]" placeholder="写下您的评论..."></textarea>
                            <button class="mt-3 px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90">提交评论</button>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 侧边栏 -->
                      <div v-if="form.modules.includes('sidebar')" class="lg:col-span-1">
                        <div class="sticky top-4">
                          <!-- 栏目导航 -->
                          <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <h3 class="font-medium text-lg mb-3">栏目导航</h3>
                            <ul class="space-y-2">
                              <li v-for="(item, index) in pageStructure.sidebar.navigation" :key="index">
                                <a href="#" class="text-gray-700 hover:text-primary text-sm flex items-center">
                                  <i class="fa fa-angle-right mr-2"></i>{{ item }}
                                </a>
                              </li>
                            </ul>
                          </div>
                          
                          <!-- 热门标签 -->
                          <div class="bg-gray-50 p-4 rounded-lg mb-6">
                            <h3 class="font-medium text-lg mb-3">热门标签</h3>
                            <div class="flex flex-wrap gap-2">
                              <a href="#" v-for="(tag, index) in pageStructure.sidebar.tags" :key="index" class="px-3 py-1 bg-white border border-gray-200 rounded-full text-sm text-gray-700 hover:bg-primary hover:text-white hover:border-primary transition-colors">
                                {{ tag }}
                              </a>
                            </div>
                          </div>
                          
                          <!-- 推荐阅读 -->
                          <div class="bg-gray-50 p-4 rounded-lg">
                            <h3 class="font-medium text-lg mb-3">推荐阅读</h3>
                            <div class="space-y-3">
                              <div v-for="(item, index) in pageStructure.sidebar.recommendations" :key="index" class="flex">
                                <img :src="`https://picsum.photos/id/${300+index}/100/100`" alt="推荐内容图片" class="w-16 h-16 object-cover rounded mr-3">
                                <div>
                                  <a href="#" class="text-sm font-medium text-gray-800 hover:text-primary line-clamp-2">{{ item.title }}</a>
                                  <p class="text-xs text-gray-500 mt-1">{{ item.date }}</p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 生成结果 - 结构模式 -->
              <div v-if="pageStructure && !loading && viewMode === 'structure'" class="p-5">
                <div class="flex items-center text-sm text-gray-500 mb-6">
                  <span><i class="fa fa-clock-o mr-1"></i> 生成时间: {{ generateTime }}</span>
                  <span class="mx-3">|</span>
                  <span><i class="fa fa-cubes mr-1"></i> 模块数量: {{ form.modules.length }}</span>
                </div>
                
                <div class="bg-gray-50 p-4 rounded-lg mb-6">
                  <h3 class="font-medium mb-3">页面基本信息</h3>
                  <table class="min-w-full">
                    <tbody>
                      <tr>
                        <td class="py-2 text-sm text-gray-500 w-1/3">页面标题</td>
                        <td class="py-2 text-sm font-medium">{{ form.title }}</td>
                      </tr>
                      <tr>
                        <td class="py-2 text-sm text-gray-500">所属栏目</td>
                        <td class="py-2 text-sm font-medium">{{ form.category }}</td>
                      </tr>
                      <tr>
                        <td class="py-2 text-sm text-gray-500">页面类型</td>
                        <td class="py-2 text-sm font-medium">
                          {{ form.type === 'article' ? '文章列表页' : 
                             form.type === 'detail' ? '内容详情页' : 
                             form.type === 'product' ? '产品展示页' : 
                             form.type === 'category' ? '栏目首页' : '关于我们页' }}
                        </td>
                      </tr>
                      <tr>
                        <td class="py-2 text-sm text-gray-500">设计风格</td>
                        <td class="py-2 text-sm font-medium">
                          {{ form.style === 'modern' ? '现代简约' : 
                             form.style === 'classic' ? '经典稳重' : 
                             form.style === 'vibrant' ? '活力动感' : 
                             form.style === 'minimal' ? '极简风格' : '专业商务' }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                
                <h3 class="font-medium text-lg mb-3">页面模块结构</h3>
                <div class="border rounded-lg overflow-hidden">
                  <div v-for="module in form.modules" :key="module" class="border-b last:border-0">
                    <div class="bg-gray-50 px-4 py-3 flex items-center justify-between">
                      <div class="flex items-center">
                        <i class="fa mr-2 text-primary" :class="getModuleIcon(module)"></i>
                        <span class="font-medium">{{ getModuleName(module) }}</span>
                      </div>
                      <button 
                        class="text-gray-400 hover:text-primary"
                        @click="toggleModuleDetails(module)"
                      >
                        <i class="fa" :class="moduleDetails[module] ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                      </button>
                    </div>
                    
                    <div v-if="moduleDetails[module]" class="p-4 bg-white">
                      <h4 class="text-sm font-medium mb-2">模块内容结构</h4>
                      <pre class="bg-gray-50 p-3 rounded text-sm overflow-x-auto"><code>{{ JSON.stringify(pageStructure[module] || {}, null, 2) }}</code></pre>
                      
                      <h4 class="text-sm font-medium mt-4 mb-2">模块功能说明</h4>
                      <p class="text-sm text-gray-600">{{ getModuleDescription(module) }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 历史记录 -->
          <div class="bg-white rounded-lg shadow-sm mt-6">
            <div class="px-5 py-3 border-b border-gray-200">
              <h2 class="text-lg font-medium text-gray-800">生成历史</h2>
            </div>
            <div class="p-0">
              <div 
                v-for="(history, index) in generateHistory" 
                :key="index"
                class="px-5 py-3 border-b border-gray-100 hover:bg-gray-50 cursor-pointer transition-colors"
                @click="loadHistory(history)"
              >
                <div class="font-medium text-gray-800 truncate">{{ history.title }}</div>
                <div class="flex items-center justify-between mt-1">
                  <span class="text-xs text-gray-500">{{ formatHistoryTime(history.timestamp) }}</span>
                  <span class="text-xs text-gray-500">{{ history.moduleCount }} 个模块</span>
                </div>
              </div>
              
              <div v-if="generateHistory.length === 0" class="px-5 py-8 text-center text-gray-500 text-sm">
                暂无生成历史
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatDate } from '@/utils/date'

// 表单数据
const form = ref({
  title: '',
  category: '',
  type: 'category',
  modules: ['banner', 'intro', 'featured', 'list'],
  style: 'modern',
  requirements: ''
})

// 生成状态
const loading = ref(false)
const pageStructure = ref(null)
const generateTime = ref('')
const generateHistory = ref([])
const viewMode = ref('preview') // preview 或 structure
const moduleDetails = ref({})

// 生成页面结构
const generatePage = async () => {
  if (!form.value.title) return
  
  loading.value = true
  try {
    // 初始化模块详情显示状态
    form.value.modules.forEach(module => {
      moduleDetails.value[module] = false
    })
    
    // 模拟AI生成过程
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // 生成页面结构
    const structure = {}
    
    // 生成栏目介绍
    if (form.value.modules.includes('intro')) {
      structure.intro = `<p>欢迎访问${form.value.title}栏目，本栏目属于${form.value.category || '未分类'}分类下的核心内容板块。</p>
        <p>在这里，您可以找到关于${form.value.title}的全面信息，包括最新动态、深度分析、实用指南和专家观点等。</p>
        <p>我们致力于为您提供高质量、有价值的内容，帮助您深入了解${form.value.title}相关领域的知识和发展趋势。</p>`
    }
    
    // 生成精选内容
    if (form.value.modules.includes('featured')) {
      structure.featured = Array.from({ length: 2 }, (_, i) => ({
        title: `${form.value.title}的${i === 0 ? '核心概念' : '实践应用'}`,
        desc: `这是一篇关于${form.value.title}${i === 0 ? '基本原理和核心概念' : '实际应用案例和实践技巧'}的深度分析文章，将帮助您${i === 0 ? '建立扎实的知识基础' : '解决实际问题'}。`,
        date: new Date(Date.now() - i * 7 * 24 * 60 * 60 * 1000).toLocaleDateString()
      }))
    }
    
    // 生成内容列表
    if (form.value.modules.includes('list')) {
      structure.list = Array.from({ length: 5 }, (_, i) => ({
        title: `${form.value.title}${i === 0 ? '入门指南' : i === 1 ? '进阶技巧' : i === 2 ? '最新发展' : i === 3 ? '常见问题' : '专家访谈'}`,
        desc: `本文将详细介绍${form.value.title}${i === 0 ? '的基础知识和入门方法' : i === 1 ? '的高级技巧和最佳实践' : i === 2 ? '的最新动态和发展趋势' : i === 3 ? '的常见问题及解决方案' : '领域专家的见解和建议'}，适合${i < 2 ? '初学者' : '有一定基础的读者'}阅读。`,
        date: new Date(Date.now() - i * 24 * 60 * 60 * 1000).toLocaleDateString(),
        views: Math.floor(Math.random() * 1000) + 100,
        comments: Math.floor(Math.random() * 50)
      }))
    }
    
    // 生成侧边栏
    if (form.value.modules.includes('sidebar')) {
      structure.sidebar = {
        navigation: Array.from({ length: 4 }, (_, i) => `${form.value.title}${i === 0 ? '概述' : i === 1 ? '基础知识' : i === 2 ? '高级应用' : '资源下载'}`),
        tags: Array.from({ length: 8 }, (_, i) => `${form.value.title}${i === 0 ? '基础' : i === 1 ? '进阶' : i === 2 ? '实战' : i === 3 ? '技巧' : i === 4 ? '工具' : i === 5 ? '案例' : i === 6 ? '趋势' : '未来'}`),
        recommendations: Array.from({ length: 3 }, (_, i) => ({
          title: `${form.value.title}相关${i === 0 ? '热门话题' : i === 1 ? '实用工具' : '学习资源'}`,
          date: new Date(Date.now() - (i + 5) * 24 * 60 * 60 * 1000).toLocaleDateString()
        }))
      }
    }
    
    // 更新结果
    pageStructure.value = structure
    generateTime.value = new Date().toLocaleString()
    
    // 保存到历史记录
    saveToHistory()
    
  } catch (error) {
    console.error('生成页面失败:', error)
  } finally {
    loading.value = false
  }
}

// 重新生成页面
const regeneratePage = () => {
  generatePage()
}

// 切换模块详情显示
const toggleModuleDetails = (module) => {
  moduleDetails.value[module] = !moduleDetails.value[module]
}

// 获取模块名称
const getModuleName = (module) => {
  const names = {
    'banner': 'Banner轮播',
    'intro': '栏目介绍',
    'featured': '精选内容',
    'list': '内容列表',
    'sidebar': '侧边栏',
    'comment': '评论区'
  }
  return names[module] || module
}

// 获取模块图标
const getModuleIcon = (module) => {
  const icons = {
    'banner': 'fa-sliders',
    'intro': 'fa-info-circle',
    'featured': 'fa-star',
    'list': 'fa-list',
    'sidebar': 'fa-th-large',
    'comment': 'fa-comments'
  }
  return icons[module] || 'fa-cube'
}

// 获取模块描述
const getModuleDescription = (module) => {
  const descriptions = {
    'banner': '展示栏目核心主题和吸引用户注意的横幅区域，通常包含标题、副标题和引导按钮。',
    'intro': '介绍栏目主题、内容范围和价值定位的区域，帮助用户了解本栏目内容。',
    'featured': '展示精选优质内容的区域，通常包含图片、标题和简介，吸引用户点击阅读。',
    'list': '以列表形式展示栏目下的文章或内容，包含标题、简介、发布时间等信息。',
    'sidebar': '位于主内容旁边的辅助区域，可包含导航、标签、推荐内容等辅助信息。',
    'comment': '允许用户发表评论和讨论的区域，增强用户互动和内容价值。'
  }
  return descriptions[module] || '该模块用于展示相关内容。'
}

// 保存到历史记录
const saveToHistory = () => {
  const historyItem = {
    title: form.value.title,
    category: form.value.category,
    structure: pageStructure.value,
    timestamp: new Date().getTime(),
    moduleCount: form.value.modules.length,
    params: { ...form.value }
  }
  
  generateHistory.value.unshift(historyItem)
  
  // 限制历史记录数量
  if (generateHistory.value.length > 10) {
    generateHistory.value.pop()
  }
}

// 加载历史记录
const loadHistory = (history) => {
  pageStructure.value = history.structure
  generateTime.value = new Date(history.timestamp).toLocaleString()
  form.value = { ...history.params }
  
  // 初始化模块详情显示状态
  form.value.modules.forEach(module => {
    moduleDetails.value[module] = false
  })
}

// 格式化历史时间
const formatHistoryTime = (timestamp) => {
  return formatDate(new Date(timestamp), 'yyyy-MM-dd HH:mm')
}

// 复制到剪贴板
const copyToClipboard = () => {
  if (!pageStructure.value) return
  
  // 构建页面结构文本
  let text = `页面标题: ${form.value.title}\n`
  text += `所属栏目: ${form.value.category}\n`
  text += `页面类型: ${form.type === 'article' ? '文章列表页' : 
                   form.type === 'detail' ? '内容详情页' : 
                   form.type === 'product' ? '产品展示页' : 
                   form.type === 'category' ? '栏目首页' : '关于我们页'}\n`
  text += `设计风格: ${form.style === 'modern' ? '现代简约' : 
                   form.style === 'classic' ? '经典稳重' : 
                   form.style === 'vibrant' ? '活力动感' : 
                   form.style === 'minimal' ? '极简风格' : '专业商务'}\n`
  text += `包含模块: ${form.value.modules.map(m => getModuleName(m)).join(', ')}\n\n`
  text += `页面结构详情:\n${JSON.stringify(pageStructure.value, null, 2)}`
  
  navigator.clipboard.writeText(text)
    .then(() => {
      alert('页面结构已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
    })
}

// 清空表单
const clearForm = () => {
  form.value = {
    title: '',
    category: '',
    type: 'category',
    modules: ['banner', 'intro', 'featured', 'list'],
    style: 'modern',
    requirements: ''
  }
  pageStructure.value = null
}
</script>
